<template>
	<view>
		<page-head title="支付" :headtype="2"></page-head>
		<view class="content" v-if="Object.keys(orderDetail).length>0">
			<view class="type_warp">
				<view :class="orderDetail.order_type==1?'sel_type':'nosel_type'">
					到店自提
				</view>
				<view :class="orderDetail.order_type==3?'sel_type':'nosel_type'">
					同城配送
				</view>
				<view :class="orderDetail.order_type==2?'sel_type':'nosel_type'">
					快递发货
				</view>
			</view>
			<view class="address">
				<view class="add_nodata" v-if="orderDetail.address_info==null"
					@click.stop="apifun.navigate('/pages/my/sitelist','type=order');">
					<view class="addr_tips">
						请填写收货地址
					</view>
					<u-icon name="arrow-right" color="#9E9E9E" size="32"></u-icon>
				</view>
				<view class="add_data" v-if="orderDetail.address_info&&Object.keys(orderDetail.address_info).length>0">
					<u-icon name="map" color="#9E190F" size="40"></u-icon>
					<view class="addr_word">
						<view class="add_top">
							<view class="city">
								{{orderDetail.address_info.address}}
							</view>
							<view class="edit_addr" @click.stop="apifun.navigate('/pages/my/sitelist','type=order');">
								修改
								<u-icon name="arrow-right" color="#9E9E9E" size="32"></u-icon>
							</view>
						</view>
						<view class="add_center">
							{{orderDetail.address_info.house}}
						</view>
						<view class="add_bottom">
							<text style="margin-right: 50rpx;">{{orderDetail.address_info.username}}</text>
							<text>{{orderDetail.address_info.mobile}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="product_warp">
				<view v-for="(item,index) in orderDetail.detail" :key="index" style="width: 100%;"
					:class="index!=0?'marT20':''">
					<product-item-num :item="item"></product-item-num>
				</view>
			</view>
			<view class="cell_warp">
				<order-cell title="商品金额" lcolor="#666666" :lsize="30" :word="orderDetail.total_amount+'积分'"
					rcolor="#666666" :rsize="30" padding="20rpx 0rpx 20rpx 0rpx"></order-cell>
				<order-cell title="快递费" lcolor="#666666" :lsize="30"
					:word="orderDetail.freight>0?'￥'+orderDetail.freight:'0.00'" rcolor="#666666"
					:rsize="30"></order-cell>
				<order-cell title="运费券" lcolor="#666666" :lsize="30"
					:word="orderDetail.coupon_freight_amount>0?'-￥'+orderDetail.coupon_freight_amount:'0.00'"
					rcolor="#666666" :rsize="30" :rightIcon="true"></order-cell>
			</view>
		</view>
		<view class="sub_body">
			<view class="pay_word">
				<view style="font-size: 28rpx;">
					<text style="color: #333333;">实付：</text>
					<text style="color: #D31E11;">{{'￥'+orderDetail.pay_amount}}</text>
				</view>
				<view style="font-size: 24rpx;">
					<text style="color: #9E9E9E">共优惠</text>
					<text style="color: #D31E11;">{{'￥'+numPrice}}</text>
				</view>
			</view>
			<view :class="issub?'pay_btn':'pay_btn_no'" @click="issub?pay():''">
				立即支付
			</view>
		</view>
	</view>
</template>

<script>
	import productItemNum from "@/components/product_item_num_int.vue"
	import orderCell from "@/components/order_cell.vue"
	export default {
		components: {
			productItemNum,
			orderCell
		},
		data() {
			return {
				apifun: this.apifun,
				detail: {
					type: 1,
					isaddr: 1
				},
				isDeduction: false,
				order_sn: null,
				orderDetail: {},
				issub: true,
				numPrice: 0
			}
		},
		onLoad(options) {
			if (options.orderSn) {
				this.order_sn = options.orderSn
				this.getOrderDetail()
			}
		},
		methods: {
			wxpaymini(sendData) { // 微信支付
				let that = this;
				uni.getProvider({
					service: 'payment',
					success: function(res) {
						if (~res.provider.indexOf('wxpay')) {
							uni.requestPayment({ // 支付
								"provider": "wxpay",
								"orderInfo": sendData,
								"timeStamp": sendData.timeStamp,
								"nonceStr": sendData.nonceStr,
								"package": sendData.package,
								"signType": sendData.signType,
								"paySign": sendData.paySign,
								success: function(res) {
									that.apifun.toast("支付成功");
									setTimeout(() => {
										
									let pages = getCurrentPages();
									let prevPage = pages[pages.length - 2];
									prevPage.$vm.page = 1
									prevPage.$vm.orderList = []
									prevPage.$vm.nodata = true
									prevPage.$vm.more = true
									prevPage.$vm.getOrderList()
									uni.navigateBack({
										delta: 1
									})
									}, 1000)
								},
								fail: function(err) {
									that.issub = true
									that.apifun.toast("支付失败");
								}
							});
						}
					}
				});
			},
			pay() {
				let data = {
					order_sn: this.orderDetail.order_sn
				}
				this.issub = false
				this.apifun.unirequest("/api/pay/pay", "post", data, (res => {
					if (res.code == 200) {
						if (res.data.appId) {
							this.wxpaymini(res.data)
						} else {
							that.apifun.toast("支付成功");
							setTimeout(() => {
								
									let pages = getCurrentPages();
									let prevPage = pages[pages.length - 2];
									prevPage.$vm.page = 1
									prevPage.$vm.orderList = []
									prevPage.$vm.nodata = true
									prevPage.$vm.more = true
									prevPage.$vm.getOrderList()
									uni.navigateBack({
										delta: 1
									})
							}, 1000)
						}
					} else {
						this.issub = true
						this.apifun.toast(res.msg)
					}
				}), true, true)
			},
			setAddr(item) {
				let data = {
					order_sn: this.orderDetail.order_sn,
					address_id: item.id
				}
				this.apifun.unirequest("/api/order/setOrderCreate", "post", data, (res => {
					if (res.code == 200) {
						this.apifun.toast("已更改")
						this.getOrderDetail()
					} else {
						this.apifun.toast(res.msg)
					}
				}), true, true)
			},
			async getOrderDetail() {
				let data = {
					order_sn: this.order_sn
				}
				await this.apifun.unirequest('/api/order/getOrderDetail', 'post', data, (res => {
					if (res.code == 200) {
						this.orderDetail = res.data
						let a = 0
						a = Number(res.data.activity_amount) + Number(res.data.deduction_amount) + Number(
							res.data.coupon_amount)
						this.numPrice = a
					} else {
						this.apifun.toast(res.msg)
					}
				}), true, true)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.marT20 {
		margin-top: 20rpx;
	}

	.pay_word {
		width: 370rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.pay_btn_no {
		width: 190rpx;
		height: 70rpx;
		border-radius: 50rpx;
		background-color: #b99088;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.pay_btn {
		width: 190rpx;
		height: 70rpx;
		border-radius: 50rpx;
		background-color: #9E190F;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	page {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 150rpx);
		/* 兼容 iOS < 11.2 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 150rpx);
		/* 兼容 iOS >= 11.2 */
	}

	.sub_body {
		width: 100%;
		background-color: #FFFFFF;
		height: 100rpx;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;
		box-sizing: border-box;
	}

	.cell_item {
		width: 100%;
		padding: 20rpx 0rpx 20rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.deduct {
		color: #666666;
		font-size: 30rpx;
		display: flex;
		align-items: center;

	}

	.ci_title {
		color: #666666;
		font-size: 30rpx;
	}

	.cell_warp {
		width: 690rpx;
		padding: 20rpx 32rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		box-sizing: border-box;
	}

	.add_bottom {
		color: #333333;
		font-size: 26rpx;
	}

	.add_center {
		font-size: 26rpx;
		color: #666666;
		margin-top: 5rpx;
		margin-bottom: 20rpx;
	}

	.add_data {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.addr_word {
		width: 580rpx;
	}

	.add_top {
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.city {
		font-size: 30rpx;
		color: #333333;
	}

	.edit_addr {
		color: #9E9E9E;
		font-size: 26rpx;
		display: flex;
		align-items: center;
	}

	.address {
		width: 690rpx;
		border-radius: 14rpx;
		background-color: #FFFFFF;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.add_nodata {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.addr_tips {
			color: #666666;
			font-size: 30rpx;
		}
	}

	.product_warp {
		width: 690rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 24rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		margin: 18rpx auto;
	}

	.sel_type {
		width: 196rpx;
		height: 90rpx;
		border-radius: 10rpx;
		background: url("../../../static/order/buy_type.png") no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #9E190F;
		font-size: 30rpx;
		border: 1rpx solid #9E190F;
	}

	.nosel_type {
		width: 196rpx;
		height: 90rpx;
		border-radius: 10rpx;
		background: url("../../../static/order/buy_type.png") no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #979797;
		font-size: 30rpx;
	}

	.type_warp {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.content {
		width: 100%;
		padding: 30rpx 30rpx 180rpx 30rpx;
		box-sizing: border-box;
	}
</style>